<template>
	<view class="popup-index">
		<uni-popup ref="areas" type="bottom" :safe-area='false' @touchmove.stop.prevent="">
			<view class="areas-box">
				<view class="tops">
					<view class="gang">
					</view>
				</view>
				<view class="title">
					<view></view>
					<view>接单区域</view>
					<view @click="close()" class="closePupop">×</view>
				</view>
				<view class="list-box">
					<view :class="areasIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in areasList"
						:key="index" @click="areasChange(index)">
						{{item.title}}
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="salary" type="bottom" :safe-area='false' @touchmove.stop.prevent="">
			<view class="areas-box">
				<view class="tops">
					<view class="gang">
					</view>
				</view>
				<view class="title">
					<view></view>
					<view>薪资范围</view>
					<view @click="close()" class="closePupop">×</view>
				</view>
				<view class="list-box">
					<view :class="salaryIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in salaryList"
						:key="index" @click="salaryChange(index)">
						{{item.title}}
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="position" type="bottom" :safe-area='false' @touchmove.stop.prevent="">
			<view class="areas-box">
				<view class="tops">
					<view class="gang">
					</view>
				</view>
				<view class="title">
					<view></view>
					<view>接单信息</view>
					<view @click="close()" class="closePupop">×</view>
				</view>
				<view class="scroll-box">
					<scroll-view scroll-y="true" style="height: 326px;width: 50%;" show-scrollbar='false' enhanced>
						<view :class="[position1Index==index?'position1-boxCh':'position1-box']"
							v-for="(item,index) in position1List" :key="index" @click="position1Change(item,index)">
							{{item.title}}
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" style="height: 326px;width: 50%;" show-scrollbar='false' enhanced>
						<view :class="[position2Index==index?'position2-boxCh':'position2-box']"
							v-for="(item,index) in position2List" :key="index" @click="position2Change(index)">
							{{item.title}}
						</view>
					</scroll-view>
				</view>
				<view class="button-box">
					<view class="reset" @click="reset()">
						重置
					</view>
					<view class="submit" @click="submit()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="more" type="bottom" :safe-area='false' @touchmove.stop.prevent="">
			<view class="areas-box">
				<view class="tops">
					<view class="gang">
					</view>
				</view>
				<view class="title">
					<view></view>
					<view>更多</view>
					<view @click="close()" class="closePupop">×</view>
				</view>
				<scroll-view scroll-y="true" style="height: 326px;" show-scrollbar='false' enhanced>
					<view class="scroll-title">
						福利待遇（可多选）
					</view>
					<view class="list-box">
						<view :class="welfareIndex.indexOf(index)>-1?'areas-listCh':'areas-list'"
							v-for="(item,index) in welfareList" :key="index" @click="welfareClick(index)">
							{{item.title}}
						</view>
					</view>
					<view class="scroll-title">
						需求年限
					</view>
					<view class="list-box">
						<view :class="ageIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in ageList"
							:key="index" @click="ageClick(index)">
							{{item.title}}
						</view>
					</view>
					<view class="scroll-title">
						学历要求
					</view>
					<view class="list-box">
						<view :class="drvingIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in drvingList"
							:key="index" @click="drvingClick(index)">
							{{item.title}}
						</view>
					</view>
					<view class="scroll-title" v-if="type==1">
						性别
					</view>
					<view class="list-box" v-if="type==1">
						<view :class="genderIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in genderList"
							:key="index" @click="genderClick(index)">
							{{item.title}}
						</view>
					</view>
					<view class="scroll-title" v-if="type==1">
						年龄
					</view>
					<view class="list-box" v-if="type==1">
						<!-- <view :class="dateIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in dateList"
							:key="index" @click="dateClick(index)">
							{{item.title}}
						</view> -->
						<view class="areas-list">
							<input type="number" placeholder='最小年龄' v-model="date[0]" />
						</view>
						<view class="areas-list" style="background: #ffffff;">
							-
						</view>
						<view class="areas-list">
							<input type="number" placeholder='最大年龄' v-model="date[1]" />
						</view>
					</view>
					<view class="scroll-title">
						更新时间
					</view>
					<view class="list-box">
						<view :class="dayIndex==index?'areas-listCh':'areas-list'" v-for="(item,index) in dayList"
							:key="index" @click="dayClick(index)">
							{{item.title}}
						</view>
					</view>
					<view class="scroll-title">
						需求类型
					</view>
					<view class="list-box">
						<view :class="secondaryIndex==index?'areas-listCh':'areas-list'"
							v-for="(item,index) in secondaryList" :key="index" @click="secondaryClick(index)">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
				<view class="button-box">
					<view class="reset" @click="resetMore()">
						重置
					</view>
					<view class="submit" @click="moreSubmit()">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		data() {

			return {
				type: this.$store.state.Type,
				areasIndex: 0, //接单区域选项
				areasList: [], //接单区域列表
				salaryIndex: 0, //薪资范围选项
				salaryList: [], //薪资范围列表
				position1List: [], //1级需求分类列表
				position1Index: 0, //1级需求分类选项
				position2List: [], //2级需求分类列表
				position2Index: -1, //2级需求分类选项
				welfareList: [], //福利待遇列表
				welfareIndex: [0], //福利待遇选项
				ageList: [], //需求年限列表
				ageIndex: 0, //需求年限选项
				drvingList: [], //学历要求
				drvingIndex: 0, //学历要求选项
				genderIndex: 0,
				dayIndex: 0,
				secondaryList: [{
						id: '',
						title: '不限',
						type: 'secondary'
					},
					{
						id: 0,
						title: '全职',
						type: 'secondary'
					},
					{
						id: 1,
						title: '兼职',
						type: 'secondary'
					}
				], //需求类型列表
				genderList: [{
						title: '不限',
						value: 2
					},
					{
						title: '男',
						value: 1
					},
					{
						title: '女',
						value: 0
					}
				], //性别列表
				dayList: [{
						title: '不限',
						value: ''
					},
					{
						title: '今天',
						value: 'today'
					},
					{
						title: '三天内',
						value: '-3 day'
					},
					{
						title: '一周内',
						value: '-7 day'
					},
					{
						title: '一个月',
						value: '-30 day'
					}
				], //更新时间
				dateList: [{
						title: '不限',
						value: ''
					},
					{
						title: '18-30',
						value: '18,30'
					},
					{
						title: '30-50',
						value: '30,50'
					},
					{
						title: '一周内',
						value: '-7 day'
					},
					{
						title: '一个月',
						value: '-30 day'
					}
				],
				secondaryIndex: 0, //需求类型选项
				date: ['0', '100']
			}
		},
		created() {
			this.getAreasList()
			this.getSalaryList()
			this.getPidPositionTypeList()
			this.getWelfareList()
			this.getAgeList()
			this.getDrvingList()
		},
		mounted() {
		},
		methods: {
			//父组件传值
			getpopup(data) {
				setTimeout(res => {
					this.$nextTick(() => {
						if (data.type == 'secondary') {
							this.secondaryList.forEach((item, index) => {
								if (item.id == data.id) {
									this.secondaryIndex = index
								}
							})
						} else {
							if (this.position1List != '') {
								this.position1List.forEach((item, index) => {
									if (item.id == data.id) {
										this.position1Index = index
										this.position1Change(item, index)
									}
								})
							} else {
								// this.getpopup(data)
							}
						}
					})
				}, 500)

			},
			//接单区域
			getAreasList() {
				index.getAreasList({
					pid: 1
				}).then(res => {
					res.data.unshift({
						id: '',
						title: "全部",
						type: 'areas'
					})
					this.areasList = res.data
					this.areasList.forEach(item => {
						item.type = 'areas'
					})
				})
			},
			//薪资范围
			getSalaryList() {
				index.getSalaryList({
					pid: 1
				}).then(res => {
					res.data.unshift({
						id: '',
						title: "全部",
						type: 'salary'
					})
					this.salaryList = res.data
					this.salaryList.forEach(item => {
						item.type = 'salary'
					})
				})
			},
			//1级接单信息
			getPidPositionTypeList() {
				index.getPidPositionTypeList({
					pid: 0
				}).then(res => {
					res.data.unshift({
						id: '',
						pid: '',
						title: "全部",
						type: 'position1'
					})
					this.position1List = res.data
					this.position1List.forEach(item => {
						item.type = 'position1'
					})
				})
			},
			//2级接单信息
			getPidPositionTypeList2(item) {
				if (item.id == '') {
					this.position2List = []
				} else {
					index.getPidPositionTypeList({
						pid: item.id
					}).then(res => {
						this.position2List = res.data
						this.position2List.forEach(item => {
							item.type = 'position2'
						})
					})
				}
			},
			//福利待遇
			getWelfareList() {
				index.getWelfareList().then(res => {
					res.data.unshift({
						id: '',
						pid: '',
						title: "不限",
					})
					this.welfareList = res.data
					this.position2List.forEach(item => {
						item.type = 'welfare'
					})
				})
			},
			//需求经验
			getAgeList() {
				index.getAgeList().then(res => {
					res.data.unshift({
						id: '',
						pid: '',
						title: "不限",
					})
					this.ageList = res.data
					this.ageList.forEach(item => {
						item.type = 'age'
					})
				})
			},
			//学历要求
			getDrvingList() {
				index.getDrvingList().then(res => {
					res.data.unshift({
						id: '',
						pid: '',
						title: "不限",
					})
					this.drvingList = res.data
					this.drvingList.forEach(item => {
						item.type = 'drving'
					})
				})
			},
			areas() {
				this.$refs.areas.open('bottom')
			},
			salary() {
				this.$refs.salary.open('bottom')
			},
			position() {
				this.$refs.position.open('bottom')
			},
			more() {
				this.$refs.more.open('bottom')
			},
			//接单区域切换
			areasChange(index) {
				this.areasIndex = index
				this.$emit('getPouup', this.areasList[this.areasIndex])
				this.$refs.areas.close()
			},
			//薪资范围切换
			salaryChange(index) {
				this.salaryIndex = index
				this.$emit('getPouup', this.salaryList[this.salaryIndex])
				this.$refs.salary.close()
			},
			position1Change(item, index) {
				this.position1Index = index
				this.position2Index = -1
				this.getPidPositionTypeList2(item)
			},
			position2Change(index) {
				this.position2Index = index
			},
			//福利待遇点击
			welfareClick(index) {
				if (this.welfareIndex.indexOf(index) < 0) {
					if (index == 0) {
						this.welfareIndex = [0]
					} else {
						this.removeByValue(this.welfareIndex, 0)
						this.welfareIndex.push(index)
					}
				} else {
					if (index != 0) {
						this.removeByValue(this.welfareIndex, index)
					}
				}
			},
			//需求年限点击
			ageClick(index) {
				this.ageIndex = index
			},
			//性别点击
			genderClick(index) {
				this.genderIndex = index
			},
			dayClick(index) {
				this.dayIndex = index
			},
			//学历要求点击
			drvingClick(index) {
				this.drvingIndex = index
			},
			secondaryClick(index) {
				this.secondaryIndex = index
			},
			resetMore() {
				this.ageIndex = 0
				this.genderIndex = 0
				this.dayIndex = 0
				this.drvingIndex = 0
				this.secondaryIndex = 0
				this.welfareIndex = [0]
				this.dayIndex = 0
				this.date = ['0', '100']
				this.genderIndex = 0
				this.position1Change(this.position1List[0], 0)
				this.moreSubmit('reset')
			},
			//接单信息确定
			submit() {
				let arr = []
				arr[0] = this.position1List[this.position1Index]
				if (this.position2List[this.position2Index]) {
					arr[1] = this.position2List[this.position2Index]
				}
				// if(this.position2Index<0){
				// 	this.$tools.toast('请选择二级分类')
				// }
				if(arr[0].title!='全部'){
						
					if(arr.length<2){
						this.$tools.toast('请选择二级分类')
						return
						console.log('tishi');
					}
						
				}
				console.log(arr,'arrrr');
				this.$emit('getPouup', arr)
				this.close()
			},
			submitPo() {
				let arr = []
				arr[0] = this.position1List[this.position1Index]
				this.$emit('getPouup', arr)
			},
			//接单信息重置
			reset() {
				this.position1Change(this.position1List[0], 0)
				this.submit()
			},
			//更多页确定
			moreSubmit(e) {
				let form = {
					welfare_id: [],
					age_id: '',
					drving_id: '',
					secondary: '',
					type: 'more',
					gender: 2,
					refresh_time: '',
					date: '',
					reset:''
				}
				if(e=='reset'){
					form.reset = 'reset'
				}
				else{
					form.reset = ''
				}
				this.welfareIndex.forEach(item => {
					form.welfare_id.push(this.welfareList[item].id)
				})
				form.age_id = this.ageList[this.ageIndex].id
				form.drving_id = this.drvingList[this.drvingIndex].id
				form.secondary = this.secondaryList[this.secondaryIndex].id
				form.gender = this.genderList[this.genderIndex].value
				form.refresh_time = this.dayList[this.dayIndex].value
				form.date = this.date
				this.$emit('getPouup', form)
				this.$refs.more.close()
			},
			moreSearch() {
				let form = {
					welfare_id: [],
					age_id: '',
					drving_id: '',
					secondary: '',
					type: 'more',
					gender: 2,
					refresh_time: '',
					date: ''
				}

				form.secondary = this.secondaryList[this.secondaryIndex].id
				this.$emit('getPouup', form)
				this.$refs.more.close()
			},
			removeByValue(arr, val) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i] == val) {
						arr.splice(i, 1);
						break;
					}
				}
			},
			//关闭弹窗
			close() {
				this.$refs.areas.close()
				this.$refs.salary.close()
				this.$refs.position.close()
				this.$refs.more.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.popup-index {
		.closePupop {
			font-size: 50rpx;
		}

		.areas-box {
			background: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
			height: 485px;
			opacity: 1;
			z-index: 5;

			.tops {
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.gang {
					width: 56rpx;
					height: 4rpx;
					background: #BDBDBD;
				}
			}

			.title {
				padding: 32rpx 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: 700;
				color: #202020;
			}

			.scroll-title {
				padding: 32rpx 52rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #333333;
			}

			.list-box {
				padding: 0 52rpx;
				display: flex;
				// justify-content: space-between;
				flex-wrap: wrap;

				.areas-list {
					margin-right: 16rpx;
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #F7F7F7;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}

				.areas-list:nth-child(3n) {
					margin-right: 0rpx;
				}

				.areas-listCh:nth-child(3n) {
					margin-right: 0rpx;
				}

				.areas-listCh {
					margin-right: 16rpx;
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #FF6600;
					;
					border-radius: 16rpx;
					margin-bottom: 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					color: #ffffff;
				}
			}
		}

		.scroll-box {
			display: flex;

			.position1-box {
				background: #f7f6f9;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.position1-boxCh {
				background: #ffffff;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FF6600;
			}

			.position2-box {
				background: #ffffff;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}

			.position2-boxCh {
				background: #ffffff;
				padding: 20rpx 32rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FF6600;
			}
		}

		.button-box {
			display: flex;
			justify-content: space-around;
			padding: 32rpx 0;

			.reset {
				padding: 20rpx 128rpx;
				color: #FF6600;
				border: 2rpx solid #FF6600;
				border-radius: 16rpx;
			}

			.submit {
				padding: 20rpx 128rpx;
				color: #FFFFFF;
				border: 2rpx solid #FF6600;
				border-radius: 16rpx;
				background: #FF6600;
			}
		}

	}
</style>
